<template>
	<Container>
		<view class="header">
			<view
				class="cupBox"
				:class="{ top: item.status === 'top', bottom: item.status === 'bottom' }"
				v-for="(item, index) in cupList"
				:key="index"
				:style="{ left: item.left + 'rpx' }"
				@tap="tap(index)"
			>
				<image class="article img" v-if="assignment.comparedArticle.beginSerialIndex === index" :src="assignment.comparedArticle.imageUrl" mode="aspectFit"></image>
				<image class="cup img" :class="{ cupTop: item.status === 'cupTop' }" src="../../../static/cup.png" mode="aspectFit"></image>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	mixins: [mixins],
	components: { AudioIcon, Question, Container },
	data() {
		return {
			cupList: [{ left: 25, status: '' }, { left: 250, status: '' }, { left: 475, status: '' }],
			animations: [],
			isCup: false,
			isEnd: false,
			timer: [],
			cupTimer: null
		}
	},
	mounted() {
		const [froms, to] = [this.assignment.comparedArticle.beginSerialIndex, this.assignment.comparedArticle.endSerialIndex]
		const other = [0, 1, 2].filter(item => {
			return item !== to && item !== froms
		})[0]
		this.animations = [{ start: froms, end: to }, { start: froms, end: other }, { start: froms, end: to }, { start: other, end: to }, { start: froms, end: to }]
	},
	beforeDestroy() {
		this.timer.map(item => {
			clearTimeout(item)
		})
		clearTimeout(this.cupTimer)
	},
	watch: {
		questionPress: function(bool) {
			this.timer.map(item => {
				clearTimeout(item)
			})
			clearTimeout(this.cupTimer)
			if (!bool) {
				this.cupList[this.assignment.comparedArticle.beginSerialIndex].status = 'cupTop'
				this.cupTimer = setTimeout(() => {
					this.animations.map((item, index) => {
						this.timer[index] = setTimeout(() => {
							if (this.bool) return
							if (index === this.animations.length - 1) this.isEnd = true
							const [startLeft, endLeft] = [this.cupList[item.start].left, this.cupList[item.end].left]
							this.cupList[item.start].left = endLeft
							this.cupList[item.end].left = startLeft
							this.cupList[item.start].status = 'top'
							this.cupList[item.end].status = 'bottom'
							setTimeout(() => {
								this.cupList[item.start].status = ''
								this.cupList[item.end].status = ''
							}, 1100)
						}, index * 2000)
					})
				}, 3000)
			} else {
				this.cupList = [{ left: 25, status: '' }, { left: 250, status: '' }, { left: 475, status: '' }]
			}
		}
	},
	methods: {
		tap: function(index) {
			this.touchAudio()
			if (!this.isEnd) return
			this.cupList[index].status = 'cupTop'
			const bool = this.assignment.comparedArticle.beginSerialIndex === index
			this.$parent.next({
				isSure: bool
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	position relative
	.cupBox
		width 200rpx
		height 200rpx
		position absolute
		top 45%
		display flex
		justify-content center
		align-items center
		transition left 1s
		.cup
			width 85%
			height 85%
			position absolute
		.article
			width 50%
			height 70%
.cupTop
	animation cupTop 1.5s ease
.top
	animation cupTop 1s ease
.bottom
	animation cupBottom 1s ease
@keyframes cupTop
	0%
		transform translateY(0)
	50%
		transform translateY(-200rpx)
	100%
		transform translateY(0)
@keyframes cupBottom
	0%
		transform translateY(0)
	50%
		transform translateY(200rpx)
	100%
		transform translateY(0)
</style>
